<template>
  <section>
        <el-form :inline="true" :model="listQuery">
            <el-form-item label="">
                <el-input size="mini" placeholder="请输入订单编号" v-model="listQuery.orderNo" />
            </el-form-item>
            <el-form-item label="">
                <el-input size="mini" placeholder="供应商名称/编号" v-model="listQuery.agencyName" />
            </el-form-item>
            <el-form-item label="">
                <el-select size="mini" v-model="listQuery.type" placeholder="类型" clearable>
                    <el-option label="全部类型" value="0"></el-option>
                    <el-option label="订单结算" value="1"></el-option>
                    <el-option label="提现" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="">
                <el-date-picker
                    value-format="yyyy-MM-dd"
                    size="mini"
                    v-model="date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" @click="handleFilter">查询</el-button>
                <el-button class="ml10" size="mini" @click="exportExcel">导出</el-button>
            </el-form-item>
        </el-form>
    <el-table ref="dataTable" :height="tableHeight" :data="list"
                        @sort-change="tblSort"
                style="width: 100%">
            <el-table-column align="left" label="供应商">
                <template slot-scope="scope">
                    <span>{{ scope.row.agencyName }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="类型">
                <template slot-scope="scope">
                    <span>{{scope.row.typeName}}</span>
                </template>
            </el-table-column>
            <el-table-column align="right" label="金额"  sortable="custom" prop="money">
                <template slot-scope="scope">
                    <span>￥{{scope.row.money}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="时间" sortable="custom" prop="created_at">
                <template slot-scope="scope">
                    <span>{{scope.row.createdAt}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="订单号">
                <template slot-scope="scope">
                        <el-link type="primary" @click="handleDetail(scope.row)">{{scope.row.orderNo}}</el-link>
                </template>
            </el-table-column>
                <el-table-column align="center" label="三方订单号" width="180">
                    <template slot-scope="scope">
                        <span>{{scope.row.outOrderNo}}</span>
                    </template>
                </el-table-column>
            <el-table-column align="left" label="商品">
                <template slot-scope="scope">
                    <span>{{scope.row.title}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="规格">
                <template slot-scope="scope">
                    <span>{{scope.row.attribute}}</span>
                </template>
            </el-table-column>
                <el-table-column align="right" label="下单数量" width="100">
                    <template slot-scope="scope">
                        <span>{{scope.row.quantity}}</span>
                    </template>
                </el-table-column>
            </el-table>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum" :page-sizes="[20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>
  </section>
</template>

<script>
    import {
        agency_money_record_list,
        agency_money_record_list_export
    } from '../../api/agency';
    export default {
        components: {
        },
        data() {
            return {
                date: undefined,
                orderLoading: false,
                tableHeight: 200,
                list: null,
                listLoading: true,
                listQuery: {
                    pageNum: 1,
                    pageSize: 20,
                    agencyName: undefined,
                    orderNo: undefined,
                    orderCol: "",
                    orderAsc: "",
                    type: '0',
                    startDate: undefined,
                    endDate: undefined,
                },
                total: null,
            }
        },
        mounted() {
            const that = this

            window.onresize = () => {

                return (() => {

                    that._getTableHeight()

                })()
            }
        },
        created() {
            this._getTableHeight();
            this.getList();
        },
        methods: {
            _getTableHeight() {
                this.tableHeight = window.innerHeight - 250
            },
            getList() {
                if(this.date) {
                    this.listQuery.startDate = this.date[0];
                    this.listQuery.endDate = this.date[1];
                } else {
                    this.listQuery.startDate = undefined;
                    this.listQuery.endDate = undefined;
                }
                this.listLoading = true;
                agency_money_record_list(this.listQuery).then(response => {
                    this.list = response.data.list;
                    this.total = response.data.total;
                    this.listLoading = false;
                })
            },
            handleFilter() {
                this.listQuery.pageNum = 1;
                this.getList();
            },
            handleSizeChange(val) {
                this.listQuery.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.pageNum = val;
                this.getList();
            },
            tblSort(d) {
                this.listQuery.orderCol = d.prop;
                this.listQuery.orderAsc = d.order;

                this.handleFilter();
            },
            createCellPos(n) {
                var ordA = 'A'.charCodeAt(0);

                var ordZ = 'Z'.charCodeAt(0);

                var len = ordZ - ordA + 1;

                var s = "";



                while( n >= 0 ) {

                    s = String.fromCharCode(n % len + ordA) + s;

                    n = Math.floor(n / len) - 1;

                }

                return s;

            },
            exportExcel() {
                agency_money_record_list_export(this.listQuery).then((res)=>{
                    if(res.data.items && res.data.items.length > 0) {
                        let items = res.data.items;

                        let export_config = res.data.exportConfig;
                        items.unshift(export_config.header)

                        var column = null;
                        eval("column = " + export_config.columnJs);
                        console.log(column)
                        let export_data = LAY_EXCEL.filterExportData(items, column);
                        let sheet_data = new Object();
                        eval("sheet_data." + res.data.sheet + "=export_data;");
                        let cellPos = this.createCellPos(parseInt(export_config.columnCount) - 1);

                        LAY_EXCEL.setExportCellStyle(export_data, "A1:" + cellPos + "1", {
                            s: {
                                fill: { fgColor: { rgb: "FFFF00" } },
                                alignment: {
                                    horizontal: 'center',
                                    vertical: 'center'
                                },
                                font: {
                                    sz: 12,
                                    bold: true
                                }
                            }
                        });

                        LAY_EXCEL.exportExcel(sheet_data, res.data.fileName, 'xlsx', {
                            extend: {
                                '!merges': export_config.mergeCells,
                                '!cols': export_config.width,
                                '!rows': LAY_EXCEL.makeRowConfig({
                                    1: 40
                                })
                            }
                        });
                    } else {
                        this.$message.error("导出数据为空");
                    }
                }).catch((err)=>{
                    console.log(err)
                })
            },
            handleDetail(row) {
                let {href} = this.$router.resolve({path: '/order_detail?id=' + row.orderId});
                window.open(href, '_blank');

            }
        }
    };
</script>
<style lang="scss" scoped>
</style>
